<template>
    <div>
        <h1>provide、inject 跨组件双向通信</h1>
        <p>父组件 provide('aaa', aaa) 提供数据</p>
        <p>子组件 let aaa = inject('aaa') 接收数据</p>

        <div style="outline: 1px solid red; padding: 15px">
            <h1>父级</h1>
            <button @click="aaa++">{{ aaa }} ++</button>
            <child :aaa="aaa"></child>
        </div>
    </div>
</template>

<script lang="ts">
// defineComponent 函数，目的是定义一个组件，内部可传入一个配置对象
import { defineComponent, ref, provide, inject } from "vue";
import child from "./child.vue";
export default defineComponent({
    components: {
        child,
    },
    setup() {
        console.log("mine.js中挂载全局属性", inject("provide_inject"));

        let provide_inject_fun: any = inject("provide_inject_fun");
        provide_inject_fun();

        let aaa = ref(1);

        // 父组件提供数据***************************
        provide("aaa", aaa);

        return {
            aaa,
        };
    },
});
</script>
